<template lang="pug">
  .libaryWrapper
    el-row(:gutter="20")
      el-col(:span="24")
        form-box(
          ref="filterForm"
          :fields="seachConfig"
          :isFilter="true"
          :submitting="searching"
          :submitHandle="searchHandle"
        )
    div(v-loading="loading")
      el-row(:gutter="30" v-if="list.length > 0")
        el-col(v-for="(course, index) in list" :md="8" :lg="6" :key="course.id")
          item(:detail="course" @detailHandle="detailHandle")
      i-pagination(
        v-bind="pagination"
        @pagination="values => getList({ ...values, ...filterData })"
      )
      empty(v-if="list.length === 0")
    info-drawer(:visible.sync="infoVisible" :id="infoId")
</template>
<script>
import { mapGetters } from 'vuex'
import { getVendorsByCourse } from './api'
import IPagination from '@/components/Basic/Pagination'
import Item from './components/item'
import InfoDrawer from './components/infoDrawer'

export default {
  components: {
    IPagination,
    Item,
    InfoDrawer
  },
  data () {
    return {
      loading: false,
      searching: false,
      list: [],
      ageList: [],
      sortList: [],
      pagination: {
        total: 0,
        pageSize: 12,
        pageNum: 0
      },
      filterData: {},
      infoVisible: false,
      infoId: ''
    }
  },
  computed: {
    ...mapGetters(['curArea']),
    courseId () {
      return this.$route.query.courseId
    },
    courseName () {
      return this.$route.query.courseName
    },
    seachConfig () {
      const { ageList, sortList } = this
      return [
        {
          key: 'sort',
          label: '课程分类',
          type: 'select',
          fieldProps: {
            options: sortList,
            props: { value: 'id', label: 'label' }
          }
        },
        {
          key: 'age',
          label: '月龄段选择',
          type: 'select',
          fieldProps: {
            options: ageList,
            props: { value: 'id', label: 'label' }
          }
        },
        {
          key: 'name',
          label: '课程名称'
        }
      ]
    }
  },
  created () {
    this.getList()
  },
  methods: {
    searchHandle (values) {
      this.filterData = values
      this.getList({
        ...values,
        pageNum: 0
      })
    },
    getList (values = {}) {
      const { pagination, courseId } = this
      const { pageSize, pageNum } = pagination
      this.loading = true
      getVendorsByCourse({ packageId: courseId, pageSize, pageNum, ...values }).then(res => {
        console.log(res)
        this.pagination = {
          total: res.total,
          pageNum: pageNum,
          pageSize: pageSize
        }
        this.sortList = res.sortList || []
        this.ageList = res.ageList || []
        this.list = res.list || []
      }).finally(() => {
        this.loading = false
      })
    },
    // 查看详情
    detailHandle (row) {
      console.log(row)
      this.infoId = row.id
      this.infoVisible = true
    }
  }
}
</script>
